<template>
  <div class="detail">
    <HmHeader showArrow @clickLeft="fn">
      面经详细
      <template #right>
      </template>
    </HmHeader>
    <h1>{{ obj.stem }}</h1>
    <div class="info">
      <span>{{ obj.createdAt }}</span>
      <span> | </span>
      <span>{{ obj.views }} 浏览量</span>
      <span> | </span>
      <span>{{ obj.likeCount }} 点赞数</span>
    </div>

    <div class="qian">
      <img :src="obj.creatorAvatar" alt="" />
      <span>{{ obj.creatorName }}</span>
    </div>

    <div class="content">
      {{ removeHtmlTags(obj.content) }}
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
    return {
    obj:{}  
    }
  },
  created(){
    this.getDetail(this.$route.params.id)
  },
methods: {
  fn() {
    this.$router.go(-1);
  },
  async getDetail(id) {
    const res = await axios({
        url: `http://interview-api-t.itheima.net/h5/interview/show?id=${id}`,
        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
    })
    this.obj = res.data.data
    // console.log(res)
  },
  removeHtmlTags(html) {
      return html?.replace(/<[^>]*>/g, "");
    },
}
}
</script>

<style lang="less" scoped>
.qian {
  display: flex;
  align-items: center;

  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}

.content {
  text-indent: 2em;
  padding: 10px;
  border: 1px solid #ebedf0;
}
</style>